<template>
  <div style="padding: 10px">
    <el-table :data="tableData"   stripe style="width: 100%">
<!--      <el-table-column fixed prop="id" sortable label="ID" width="150"/>-->
      <el-table-column label="封面" width="120">
        <template #default="scope">
          <el-image
              style="width: 100px;height: 100px"
              :src="scope.row.cover"
              :preview-src-list="[scope.row.cover]"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="carPartsName" label="汽车配件名称" width="120"/>
      <el-table-column prop="standard" label="规格" width="120"/>
      <el-table-column prop="carNumber" label="配件编号" width="120"/>

      <el-table-column prop="sale_price" label="价格" width="120"/>

      <el-table-column  label="数量" width="120">
        <template #default="scope">
          <el-button @click="jianshao(scope.row)">-</el-button>
          {{scope.row.buy_number}}
          <el-button @click="zengjia(scope.row)">+</el-button>
        </template>
      </el-table-column>
      <el-table-column  label="小计" width="140">
        <template #default="scope">
          {{scope.row.sale_price*scope.row.buy_number}}
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
            <el-popconfirm title="确认删除?" @confirm="handleDelete(scope.row)">
              <template #reference>
                <el-button type="text">删除</el-button>
              </template>
            </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-form-item>共计：{{sum_price}}元</el-form-item>

    <el-button type="primary">结算</el-button>
  </div>

</template>

<script>

import request from "@/utils/request";

import {View} from "@element-plus/icons-vue";
export default {
  name: 'Cart',
  components: {View},
  data() {
  let sum_price=0;
    return {
      currentPage: 1,
      total: 10,
      tableData: [],
      sum_price,
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      let u=sessionStorage.getItem("user");
      let user=JSON.parse(u);
      request.get("/buy_detail/"+user.id).then(res => {
        console.log(res)
        this.tableData = res.data
        for(let i=0;i<res.data.length;i++){

          this.sum_price+=res.data[i].buy_number*res.data[i].sale_price
        }
      })

    },
    // totalprice(){
    //   this.sum_price=0
    //   for(let i=0;i<this.tableData.length;i++){
    //
    //     this.sum_price+=this.tableData[i].buy_number*this.tableData[i].sale_price
    //   }
    // },
    jianshao(row){
      if(row.buy_number===0){
        this.$message({
          type:"error",
          message:"不能再减少啦"
        })
        return
      }else{
        row.buy_number-=1;
      }
    },
    zengjia(row){
      row.buy_number+=1;
      // this.totalprice();
    },
    handleDelete(row) {
      let u=sessionStorage.getItem("user");
      let user=JSON.parse(u);
      request.delete("/buy_detail/"+user.id+"/"+row.carNumber).then(res=>{
        console.log(res)
        this.$message({
          type:"success",
          message:"删除成功"
        })
      })
      this.load();
    }

  }

}

</script>
